<script setup>
import { ref,onMounted } from 'vue'
import {queryAllApi } from '@/api/meun'

onMounted(() => {
  selectAll();
})
const handleClick = () => {
  console.log('click')
}
const selectAll=async()=>{
  const res=await queryAllApi();
  tableData.value=res.data;
}

const tableData = ref([])

</script>
<template>
  <!-- 头部 -->
<div class="container">
  <h1>菜单管理</h1>
  <el-button type="primary">+ 新增菜单</el-button>
</div>

<!-- table表格 -->
<div class="container">
<el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index"  label="序号" width="150" align="center" />
    <el-table-column prop="title" label="菜单名" width="120" />
    <el-table-column prop="parentName" label="父组件名称" width="120" />
    <el-table-column prop="menuName" label="前端菜单名" width="120" />
    <el-table-column prop="path" label="路径" width="600" />
    <el-table-column prop="icon" label="图标" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          修改
        </el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div> 

</template>


<style scoped>
.container{
  margin: 15px 0px;
}
</style>